baubs git
Commit c573c6414cb602303c75233a2b05882aaa70a6de
Parents : 9d9f71c
Author : Jan-Henrik Bruhn <hi@jhbruhn.de>
Date : 2025-12-07T13:12:08+01:00
Add machine info tooltip to serial number in header
Show detailed machine information when hovering over serial number:
- Serial number
- MAC address
- Total stitches sewn by machine
- Stitches since last service
Tooltip dynamically includes only available information.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changes
Diff
diff --git a/src/App.tsx b/src/App.tsx
index 6cb39e0..b4edf53 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -118,7 +118,24 @@ function App() {
<div className="flex items-center gap-2">
<h1 className="text-lg font-bold text-white leading-tight">SKiTCH Controller</h1>
{machine.isConnected && machine.machineInfo?.serialNumber && (
- <span className="text-sm text-blue-200">• {machine.machineInfo.serialNumber}</span>
+ <span
+ className="text-sm text-blue-200 cursor-help"
+ title={`Serial: ${machine.machineInfo.serialNumber}${
+ machine.machineInfo.macAddress
+ ? `\nMAC: ${machine.machineInfo.macAddress}`
+ : ''
+ }${
+ machine.machineInfo.totalCount !== undefined
+ ? `\nTotal stitches: ${machine.machineInfo.totalCount.toLocaleString()}`
+ : ''
+ }${
+ machine.machineInfo.serviceCount !== undefined
+ ? `\nStitches since service: ${machine.machineInfo.serviceCount.toLocaleString()}`
+ : ''
+ }`}
+ >
+ • {machine.machineInfo.serialNumber}
+ </span>
)}
{machine.isPolling && (
<ArrowPathIcon className="w-3.5 h-3.5 text-blue-200 animate-spin" title="Auto-refreshing status" />
Served by rngit 1.4.2 - Generated in 0.16s